<template>
  
  <router-link to="/user"  >
    <van-cell center title="<    订单列表" icon="icon-fanhui" style="font-size: 18px; font-family:'小黑';" /> 
    </router-link>
    
    
    <van-grid  v-model:active="activeName" class="orders">
        <van-grid-item  text="全部" to="/list?id=0"  name="a" class="grid"/>
        <van-grid-item  text="待支付" to="/payfor?id=1" name="b" class="grid"/>
        <van-grid-item  text="待收货" to="/receipt?id=2" name="c" class="grid"/>
        <van-grid-item  text="待自提" to="/pickup?id=3" name="d" class="grid"/>
      </van-grid>
  
      <div class="lis" v-for="item in product" >
        
      
        <div class="addre">🦌 {{item.address_book}} {{ item.detail }} </div><hr>
        <div class="stass"> {{ item.status }}</div>
        <div   class="ords">下单时间:  {{ item.order_time }} </div>
       
        <div  class="amo"> 总价: ￥{{ item.amount }}</div>
    
        <van-button type="success" to="/Order" size="small" id="more">再来一单</van-button>
        <div class="image6"></div>
        </div>
  
  
    
    </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from '../utils/axios.js'
  onMounted(()=>{
    axios.get('inquire_order').then(res=>{
      console.log(res.data);
      product.value = res.data
      for (let i = product.value.length - 1; i >= 0; i--) {
    if (product.value[i].status == 6) {
      product.value[i].status = '待自提';
    } else {
      product.value.splice(i, 1);
    }
  }
      console.log(product.value);
    })
  })
    
  const time = ref(1* 15 * 60 * 1000);
  
  
  const product = ref([
    { id: 1, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' },
    { id: 2, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' },
    { id: 3, number: 1, status: '待支付', address_book: 'A公司', order_time: '20:00:00', checkout_time: '20:00:00', pay_method: '支付宝', amount: 11.00, remark: '多加辣椒',detail:'111' }
  ])

  const activeName = ref('d');
    </script>
  
    <style>
    
  .lis{
  margin-left:10px;
  margin-top: 10px;
  background-color: white;
  margin-right: 10px;
  
  }
  .addre{
    padding:10px;
    font-size: 15px;
    border-bottom:#C8C9CC;
    margin-top: 20px;
  }
  .ords{
   
    font-size: 13px;
    font-family: '小宋';
    color:dimgray ;
    margin-left: 65px;
    margin-top: 30px;
  }
  .amo{
   
    font-size: 13px;
    font-family: '小宋';
    color:dimgray ;
    margin-left: 65px;
    margin-top: 20px;
  
  }
  .stass{
    position: relative;
    font-size: 13px;
    color:#96999C;
    margin-left: 285px;
    margin-top: -38px;
   
  }
  #more{
    margin-left: 270px;
    color:black;
    margin-bottom: 10px;
  
  }
  .image6{
    position: absolute;
    width:45px;
    height:45px;
    background-color:black;
    margin-top: -88px;
    margin-left: 10px;
    background:url(https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00578-1005.jpg) 40px,40px;
    
    
  }
  .van-grid-item__text {
    font-size: 16px;
    cursor: pointer;
    
  }
  .van-grid-item__text:after{
    color: aquamarine;
  
  }
    
  </style>